<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/2/16
  Time: 12:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
    <title>用户选座</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="/css/style.min.css" rel="stylesheet">
    <link href="/layui/css/layui.css" rel="stylesheet">
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript"  src="/layui/layui.js"></script>
    <script>
        layui.use(["layer","laydate","table","laypage"],function () {
            var layer=layui.layer;
            var table=layui.table;
            var laydate=layui.laydate;
            var laypage=layui.laypage;
            window.selectSeat=function (seatNo) {
                $("#seatNo").val(seatNo)
                laydate.render({
                    elem:"#begin1"
                    ,btns: [],
                    trigger:'click',
                    min:1,
                    max:1,
                    theme: '#393D49',
                    done:function (value) {
                        $.ajax({
                            type:"post",
                            url:"/selectSeat/selectByTimeCode.action",
                            data:{begin1:value,seatNo: $("#seatNo").val()},
                            dataType:"json",
                            success:function (message) {
                                var html="<option>请选择时间段</option>";
                                var statue=message.code
                                if (statue==0){
                                    html += " <option value=\"1\">\n" +
                                        "                            上午\n" +
                                        "                        </option>\n" +
                                        "                        <option value=\"2\">\n" +
                                        "                            下午\n" +
                                        "                        </option>"
                                }
                                if (statue==1){
                                    html += " <option value=\"2\">\n" +
                                        "                            下午\n" +
                                        "                        </option>"
                                }
                                if (statue==2){
                                    html += " <option value=\"1\">\n" +
                                        "                            上午\n" +
                                        "                        </option>"
                                }
                                if (statue==3){
                                    layer.msg("该座位明天已经预约满了，请选择其他座位")
                                }
                                $("#begin2").html(html)
                            }
                        })
                    }
                })
                layer.open({
                    type:1,
                    title:"选择座位信息",
                    area: ['400px', '500px'],
                    content:$("#addSelectSeat")
                })
            }
            window.showSeat=function (seatNo) {
                $("#seatNo1").val(seatNo);
                layer.open({
                    type:1,
                    title:"查看座位预约信息",
                    area: ['1000px', '600px'],
                    content:$("#showSeat")
                })
                laydate.render({
                    elem:"#begin11"
                    ,btns: [],
                    trigger:'click',
                    min:-3,
                    max:2,
                    theme: '#393D49',
                    done:function (value) {
                        table.render({
                            elem:'#seatMsg',
                            skin:'row,line',
                            method:"post",
                            url:'/selectSeat/selectByTime.action',
                            where:{begin1:value,seatNo:$("#seatNo1").val()},
                            limit:5,
                            page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                                layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']//自定义分页布局
                                ,limits:[5]
                                ,first: '首页' //不显示首页
                                ,last:"尾页" //不显示尾页
                            },
                            skin:'nob',// 无边框风格
                            size:'lg',// 大尺寸
                            done:function () {
                                $(".layui-table-box").css("border-width","1px");
                                $(".layui-table-header tr").css("height","50px");
                                $(".layui-table-header tr td").css("width","50px");
                                $(".layui-table-header tr").css("background-color","white");
                                $(".layui-table-header tr span").css("color","#666666");
                                $(".layui-table-body tr").css("height","50px");
                            },
                            cols:[[
                                {field:'selectId',title:'选座编号',align:'center',width:140},
                                {field:'studentNo',title:'用户账号',align:'center',width:180},
                                {field:'begin1',title:'预约日期',align:'center',width:160},
                                {field:'begin2Name',title:'预约时间段',align:'center'},
                                {field:'statueName',title:'选座状态',align:'center',width:160},
                            ]]
                        });
                    }
                })
            }
            window.showSeatView=function(result){
                var html="";
                for (var i = 0; i <result.length ; i++) {
                    html+="<div class=\"col-sm-6 col-lg-3\">\n" +
                        "                <div class=\"card\">";
                    if (result[i].color==1){
                        html+="  <div class=\"card-header bg-warning\">";
                    }
                    if (result[i].color==2){
                        html+="  <div class=\"card-header bg-info\">";
                    }
                    if (result[i].color==3){
                        html+="  <div class=\"card-header bg-success\">";
                    }
                    if (result[i].color==4){
                        html+="  <div class=\"card-header bg-pink\">";
                    }
                    html+="<h4>座位编号:"+result[i].seatNo+"</h4>\n" +
                        "                        <h4>负责员工:"+result[i].teacherName+"</h4>\n" +
                        "                        <h4>员工号码:"+result[i].teacherPhone+"</h4>\n" +
                        "                        <h4>当天状态:"+result[i].nowstatueName+" </h4></div>\n" +
                        "                        <div class=\"card-body\" align=\"center\">";
                    if (result[i].statue==0||result[i].statue==1||result[i].statue==2){
                        html+="<button class=\"btn btn-primary\" onclick=\"selectSeat('"+result[i].seatNo+"')\">选座</button>"
                    }else{
                        html+="<button class=\"btn btn-danger\"  disabled=\"disabled\">选座</button>"
                    }
                    html+=" <a class=\"btn btn-primary\" onclick=\"showSeat('"+result[i].seatNo+"')\">查看</a>\n" +
                        "                        </div>\n" +
                        "                     </div>\n" +
                        "                     </div>"
                }
                $("#showSeatView").html(html)
            }
            $("#addSelectSeatbutton").click(function () {
                    $.ajax({
                        type:"post",
                        url:"/selectSeat/addSelectSeat.action",
                        data:{seatNo:$("#seatNo").val(),studentNo:$("#studentNo").val(),begin1:$("#begin1").val(),begin2:$("#begin2").val()},
                        dataType:"json",
                        success:function (message) {
                            var statue=message.code;
                            if (statue==0){
                                layer.msg("预约失败，请重新尝试")
                            }else{
                                layer.msg("预约成功，请准时前往座位学习")
                                $("#addSelectSeatbutton").attr('disabled',true);
                            }
                        }
                    })
            })
            $("#begin2").change(function () {
                $.ajax({
                    type: "post",
                    url: "/selectSeat/selectByTimeStudentNo.action",
                    data: { begin2: $("#begin2").val(), studentNo: $("#studentNo").val(),begin1:$("#begin1").val()},
                    dataType: "json",
                    success: function (message) {
                        var statue=message.code;
                        if (statue==1){
                            $("#addSelectSeatbutton").attr('disabled',true);
                            layer.msg("您已预约该时间段的座位,不能再同一时间段预约两个座位")
                        }else{
                            $("#addSelectSeatbutton").attr('disabled',false);
                            layer.msg("请继续点击预约按钮继续预约")
                        }
                    }
                })
            })
            $.ajax({
                type:"get",
                url:"/seat/selectAllSeat.action",
                data:{limit:8,page:1,floor:0,room:0},
                dataType:"json",
                success:function (data) {
                    var result=data.data;
                    showSeatView(result)
                    laypage.render({
                        elem:'page',
                        count:data.count,
                        layout:['first','prev','page','next','last','limit','count','skip'],
                        limit:8,
                        limits:[8,12,16],
                        groups:5,
                        prev:'<i class="layui-icon layui-icon-prev"></i> ',
                        next:'<i class="layui-icon layui-icon-next"></i> ',
                        first:'首页',
                        last:'尾页'
                        ,theme: '#FF5722',jump: function(obj, first) {
                            $.ajax({
                                type:"get",
                                url:"/seat/selectAllSeat.action",
                                data:{limit:obj.limit,page:obj.curr,floor:0,room:0},
                                dataType:"json",
                                success:function (data) {
                                    var result=data.data;
                                    showSeatView(result)
                                }
                            })
                            //首次不执行
                            if (!first) {
                                //do something
                            }
                        }
                    })
                }
            })
            window.selectByNo=function () {
                $.ajax({
                    type:"get",
                    url:"/seat/selectAllSeat.action",
                    data:{limit:8,page:1,floor:$("#floor").val(),room:$("#room").val()},
                    dataType:"json",
                    success:function (data) {
                        var result=data.data;
                        showSeatView(result)
                        laypage.render({
                            elem:'page',
                            count:data.count,
                            layout:['first','prev','page','next','last','limit','count','skip'],
                            limit:8,
                            limits:[8,12,16],
                            groups:5,
                            prev:'<i class="layui-icon layui-icon-prev"></i> ',
                            next:'<i class="layui-icon layui-icon-next"></i> ',
                            first:'首页',
                            last:'尾页'
                            ,theme: '#FF5722',jump: function(obj, first) {
                                $.ajax({
                                    type:"get",
                                    url:"/seat/selectAllSeat.action",
                                    data:{limit:obj.limit,page:obj.curr,floor:$("#floor").val(),room:$("#room").val()},
                                    dataType:"json",
                                    success:function (data) {
                                        var result=data.data;
                                        showSeatView(result)
                                    }
                                })
                                //首次不执行
                                if (!first) {
                                    //do something
                                }
                            }
                        })
                    }
                })
            }
        })


    </script>
</head>
<%--选座模板--%>
<div class="card" id="addSelectSeat" style="display: none">
    <div class="card-body">
        <form class="form-horizontal" action="lyear_forms_elements.html" method="post" onsubmit="return false;">
            <div class="form-group">
                <label class="col-md-3 control-label">账号</label>
                <div class="col-md-7">
                    <input class="form-control" type="text" id="studentNo" name="studentNo" value="${user.id}" readonly="true">
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-3 control-label" >座位号</label>
                <div class="col-md-7">
                    <input class="form-control" type="text" id="seatNo" name="seatNo" readonly="true">
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-3 control-label" >预约日期</label>
                <div class="col-md-7">
                    <input class="form-control" type="text"   id="begin1" name="begin1">
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-3 control-label" >具体时间</label>
                <div class="col-md-7">
                    <select class="form-control" id="begin2">
                    </select>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-9 col-md-offset-3">
                    <button class="btn btn-primary" type="submit" id="addSelectSeatbutton" disabled="disabled">预约</button>
                </div>
            </div>
        </form>
    </div>
</div>
<%--查看座位模板--%>
<div class="card" id="showSeat" style="display: none">
    <div class="card-body">
        <div class="form-group">
            <label class="col-md-3 control-label" >座位号</label>
            <div class="col-md-7">
                <input class="form-control" type="text" id="seatNo1" name="seatNo" readonly="true">
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-3 control-label" >预约日期</label>
            <div class="col-md-7">
                <input class="form-control" type="text" id="begin11" name="begin1">
            </div>
        </div>
        <table class="table table-bordered" id="seatMsg" ></table>
    </div>
</div>
<body>
<div class="form-group">
    <form >
        <input type="hidden" name="method" value="selectAllSeat">
        <input type="hidden" value="1" name="page">
    <div class="col-xs-12 col-lg-3">
       <select class="form-control" id="floor" name="floor">
        <option value="001">一楼</option>
        <option value="002">二楼</option>
        <option value="003">三楼</option>
        <option value="004">四楼</option>
        <option value="005">五楼</option>
    </select>
    </div>
    <div class="col-xs-12 col-lg-3">
        <select class="form-control" id="room" name="room">
        <option value="001">一号</option>
        <option value="002">二号</option>
        <option value="003">三号</option>
        <option value="004">四号</option>
        <option value="005">五号</option>
    </select>
    </div>
        <div class="col-xs-12 col-lg-4">
        <input type="button" value="查询" onclick="selectByNo()" class="btn btn-info">
        </div>
    </form>
    <label class="col-xs-12"></label>
</div>
<br>
    <div class="container-fluid p-t-15">
        <div class="row" id="showSeatView">

        </div>
        <div id="page">
        </div>
    </div>
</body>
</html>
